<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script type="text/javascript" src="./js/jquery.min.js"></script>

</head>
<body style="padding: 30px">
<div align="center">
    <h3>旅游城市美食推荐系统</h3>
    <div><span class="badge text-bg-warning">基于阿里云百炼大模型平台</span></div>

    <form class="row g-2" style="padding-top: 10px;text-align: center">

        <div class="col-auto">

            <input type="type" class="form-control" id="city" placeholder="请输入您要旅游的城市" style="width: 220px">
        </div>
        <div class="col-auto">
            <button id="btn" type="button"  class="btn btn-primary mb-3"  >提交</button>
        </div>
    </form>
    <div id="result" style="text-align: left;"></div>

</div>
<script type="text/javascript">
    $(function(){
        $("#btn").on('click',function (){
            var city=$("#city").val();
            console.log($("#city").val())
            $.post("bailian/api",{city:city},function(result){
                result=eval("("+result+")");
                var content=city+"的特色美食有:<br/>"+result.output.choices[0].message.content
                $("#result").html(content);
            });
        })

    })


</script>
</body>

</html>